<template>
    <div class="info_item">
        <van-cell :is-link="isArrow" style="align-items:center" @click="isshow">
            <div class="info_left">
                <span>{{ type }}</span>
                <span>{{ desc }}</span>
            </div>
        </van-cell>
        <van-popup v-model:show="show" position="bottom" :style="{ height: '53%' }" closeable>
            <div class="popup_show">
                <div class="show_item">
                        <div class="item_header">
                            <div class="item_left">
                                <img :src="attrValue.primaryPicUrl"
                                    alt="">
                            </div>
                            <div class="item_right">
                                <van-tag class="tejia" type="warning" size="medium">{{ attrValue.promotionDesc }}</van-tag>
                                <div class="right_price" v-if="attrValue.price.finalPrice">价格：￥ {{ attrValue.price.counterPrice }} 到手￥{{ attrValue.price.basicPrice }}</div>
                                <div class="right_price_else" v-else>价格：￥ {{ attrValue.price.counterPrice }} <span>￥{{ attrValue.price.basicPrice }}</span></div>
                                <div class="choose_shop">{{ type }}</div>
                            </div>
                        </div>
                    <div class="choose_list">
                        <div class="list_item">
                            <div class="list_title">{{ attrInfo.name }}</div>
                            <div class="item_choose" >
                                <div @click="showActive(item.id)" class="choose_item" :class="{active:shopActive===item.id}" v-for="item in attrInfo.skuSpecValueList" :key="item.id">{{ item.value }}</div>
                            </div>
                        </div>
                    </div>
                    <!-- 数量 -->
                    <div class="shop_num">
                        <div class="num_title">数量</div>
                        <div class="choose_num">
                            <el-input-number v-model="shopNum" :min="1" @change="cartNum" />
                        </div>
                    </div>
                </div>
            </div>
            <BottomSelection></BottomSelection>
        </van-popup>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: 'ProductPopUp',
})
</script>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import BottomSelection from '../BottomSelection/index.vue'
const props = defineProps<{
    type: string,
    desc?: string,
    isArrow?: boolean | undefined,
    attrValue?: any,
}>()
const emit = defineEmits(['chengeShop','chengeShopcart'])
const show = ref(false)
const value = ref(1)
const shopNum = ref(1)

// 用来点击那个那个高亮的选择
const shopActive = ref()


function isshow() {
    show.value = !show.value
}
// 获取正确的列表
const attrInfo = computed(()=>{
    shopActive.value = props.attrValue.skuSpecList.skuSpecValueList[0].id
    return props.attrValue.skuSpecList || {}
})

// 点击商品款式就让哪个高亮
function showActive(id:number){
    shopActive.value = id
}
// 改变父元素的添加购物车数量
function cartNum(){
    let obj = attrInfo.value.skuSpecValueList?.find((item:any)=>shopActive.value === item.id)
    console.log(obj);
    emit('chengeShopcart',shopNum.value)
}


defineExpose({
    show
})

</script>

<style scoped>
* {
    padding: 0;
}

.info_item {
    /* border-bottom: 1px solid #eee; */
    padding-left: 15px;
    padding-right: 15px;
}

.info_left {
    display: flex;
    align-items: center;
    height: 52px;
    line-height: 52px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #eee;
}

/* 下面的规格 */
.popup_show {
    position: relative;
    padding: 16.5px 15px 63px;
}

.show_item .item_header {
    display: flex;
    margin-bottom: 21px;
}

.show_item .item_left {
    width: 98px;
    height: 98px;
}

.show_item .item_left img {
    width: 100%;
    height: 100%;
}

.show_item .item_right {
    align-self: flex-end;
    margin-left: 10px;
    font-size: 14px;
    color: red;
}

.show_item .item_right div {
    margin-top: 2px;
}

.item_right .tejia {
    height: 17px;
    color: #fff !important;
    background-color: #F48F18;
    border-radius: 6px;
    font-size: 12px;
    text-align: center;
}

.item_right .choose_shop {
    color: #333;
}

.choose_list {
    padding-bottom: 10px;
}

.list_item {
    font-size: 14px;
}

.list_item .list_title {
    padding-bottom: 6px;
}

.list_item .item_choose {
    display: flex;
    flex-wrap: wrap;
}

.list_item .item_choose .choose_item {
    padding: 6px 12px;
    margin: 0 15px 10px 0;
    border: 2px solid #ccc;
    box-sizing: border-box;
}

.list_item .item_choose .choose_item.active {
    border: 2.5px solid rgb(196, 14, 14);
    border-radius: 6px;
    color: rgb(196, 14, 14);
    box-sizing: border-box;
}
.right_price{
    font-size: 12px;
}
.right_price_else span{
    font-size: 10px;
    text-decoration: line-through;
    color: #aaa ;
}
.shop_num {}

.num_title {
    margin-bottom: 6px;
    font-size: 14px;
}


/* 组件样式 */
</style>